<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/style.css">
    <title>餐厅游戏</title>
</head>
<body>
    <div class="blackBackground"></div>
    <div class="restaurant">
        <div class="data">
            <div class="date">
                W1 D1
            </div>
            <div class="money">
                ￥500
            </div>
        </div>
        <div class="cook">
            <div data-state="ready" class="cooker"><img src="./restaurant/cook.png" class="cook-img" alt=""><div class="cooker-food"></div><img src="./restaurant/iconfinder_Food-Dome_379366.png" class="cooker-finish"></div>
            <div data-state="null" id="nullCooker" class="cooker"><img src="./restaurant/unKnowniconfinder_Chef-2_379358.png" class="cook-img" alt=""><div class="cooker-food"></div><img src="./restaurant/iconfinder_Food-Dome_379366.png" class="cooker-finish"></div>
        </div>
        <div class="tips">
            <div class="tipsText"></div>
        </div>
        <div class="customer">
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                    <div data-ready="false" class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div data-sit="false" class="customers">
                <img class="customer-img" src="./restaurant/noPeople.png" alt="">
                <div class="wait-foods">
                    <div data-ready="false"  class="wait-food"></div>
                    <div data-ready="false"  class="wait-food"></div>
                    <div data-ready="false"  class="wait-food"></div>
                </div>
                <div class="customerText"></div>
            </div>
            <div class="waitCustomer">
                <img class="waitCustomeImg" src="" alt="">
                <div class="waitCustomerText">等待中</div>
            </div>
        </div>
    </div>
    <div class="messageBox">
        <div class="beginGames">
            <div class="beginGamesTitle">WebMOOC餐厅开业啦！</div>
            <div class="beginGamesText">webMOOC餐厅即将开业，请认真经营你的餐厅吧，经营餐厅需要做好下面几件事情！加油！</div>
            <div class="beginGamesList">
                <div class="BGList">招聘厨师</div>
                <div class="BGList">迎接客人</div>
                <div class="BGList">烹饪美食</div>
            </div>
            <button class="beginGamesBtn">开始经营吧</button>
        </div>
    </div>
    <div class="menu">
        <div class="menu-customer">
            <img class="menu-customer-head" src=" " alt="">
            <div class="menu-customer-text">顾客正在点菜，已点0元的菜</div>
        </div>
        <form class="menu-list">
            <p class="menu-list-items">凉菜（三选一，可不点）</p>
            <ul>
                <li data-index="1" class="menu-list-item cold-food" ><input type="checkbox" name="" id="">凉拌折耳根···￥15</li>
                <li data-index="2" class="menu-list-item cold-food" ><input type="checkbox" name="" id="">油炸花生米···￥18</li>
                <li data-index="3" class="menu-list-item cold-food" ><input type="checkbox" name="" id="">凉拌木耳····￥20</li>
            </ul>
            <p class="menu-list-items">主菜（五选一，必点）</p>
            <ul>
                <li data-index="4" class="menu-list-item main-food"><input type="checkbox" name="" id="">红烧茄子···￥30</li>
                <li data-index="5" class="menu-list-item main-food"><input type="checkbox" name="" id="">香辣鸡腿堡··￥20</li>
                <li data-index="6" class="menu-list-item main-food"><input type="checkbox" name="" id="">大盘鸡····￥60</li>
                <li data-index="7" class="menu-list-item main-food"><input type="checkbox" name="" id="">麻婆豆腐···￥18</li>
                <li data-index="8" class="menu-list-item main-food"><input type="checkbox" name="" id="">兰州拉面···￥12</li>
            </ul>
            <p class="menu-list-items">饮品（三选一，可不点）</p>
            <ul>
                <li data-index="9"  class="menu-list-item drink"><input type="checkbox" name="" id="">可乐····￥10</li>
                <li data-index="10" class="menu-list-item drink"><input type="checkbox" name="" id="">橙汁····￥12</li>
                <li data-index="11" class="menu-list-item drink"><input type="checkbox" name="" id="">枸杞银耳汤·￥30</li>
            </ul>
        </form>
        <div class="menu-btns">
            <button class="menu-btn">点好了，快点上菜</button>
            <button class="menu-btn">不吃了</button>
        </div>
        
    </div>
    <audio loop="loop" src="./restaurant/bGmusic.mp3" autoplay="autoplay"></audio>
</body>
<script type="module" >   

import  data  from "./js/data.js";
import cook from "./js/cook.js"
import customer from "./js/customer.js"
import message from "./js/entrance.js"
import foods from "./js/foods.js"

    function main(){

        message.beginGames();
        //进入 -》 点菜 -》 等待 -》 用餐 -》 付款
        //  L》 不点餐 -》 离开 
        data.newDay()    
    }
    window.onload = main();
</script>
</html>